<!DOCTYPE HTML>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>${item.name}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="${item.name}" />
    <meta name="keywords" content="${item.name}" />

    <!-- Animate.css -->
    <link rel="stylesheet" href="/static/front/css/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="/static/front/css/icomoon.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="/static/front/css/bootstrap.css">

    <!-- Magnific Popup -->
    <link rel="stylesheet" href="/static/front/css/magnific-popup.css">

    <!-- Theme style  -->
    <link rel="stylesheet" href="/static/front/css/style.css">

    <!-- Modernizr JS -->
    <script src="/static/front/js/modernizr-2.6.2.min.js"></script>
    <link rel="stylesheet" href="/static/front/css/common.css">
    <link rel="stylesheet" href="/static/front/css/sign.css">
    <script src="/static/front/js/common.js"></script>
    <script src="/static/front/js/jquery.min.js"></script>


    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="/static/front/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BZ8GAdHiC1wkmm32aILp7cRf"></script>
    <style type="text/css">
        #l-map{height:500px;width:100%;}
        #r-result{display: none}
        .form_li {
            margin-bottom: 16px;
            position: relative
        }

        .form_li .label {
            display: block;
            margin-bottom: 4px
        }

        .form_li .label .error_meg,.form_li .label_l .error_meg {
            margin-left: 4px
        }

        .form_li .label_l {
            width: 100px;
            float: left;
            text-align: right
        }

        .form_li .label_l.right {
            text-align: right
        }

        .form_li .label_l.left {
            text-align: left
        }

        .form_li .label_l.middle {
            margin-top: 8px;
            line-height: 20px
        }

        .form_li .con_l {
            padding-left: 116px
        }
    </style>

</head>
<body>

<div class="fh5co-loader"></div>

<div id="page">
    @include("/common/front/_nav.html"){}

    <header id="fh5co-header" class="fh5co-cover fh5co-cover-sm" role="banner" style="background-image:url(http://eef2018.tkgc.net/kaptcha/7e8e6762-16b2-4160-9cd8-6d732e980c3d.jpg);">
        <div class="overlay"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-7 text-left">
                    <div class="display-t">
                        <div class="display-tc animate-box" data-animate-effect="fadeInUp">
                            <h1 class="mb30">在线注册</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div id="fh5co-blog" class="fh5co-bg-section" style="padding-bottom: 0em;">
        <div class="container">
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                                在线支付
                            </h4>
                        </div>
                        <div class="modal-body" id="myModalContent">
                            在这里添加一些文本
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <!--<button type="button" class="btn btn-primary">-->
                            <!--完成-->
                            <!--</button>-->
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal -->
            </div>
            <div class="row animate-box row-pb-md" data-animate-effect="fadeInUp">
                <div class="col-md-10 col-md-offset-1 text-left ">
                    <!--<span>Thoughts &amp; Ideas</span>-->
                    <div>

                        <div class="sign_tips common_padding">
                            <h2 class="bold700" style="color:red">恭喜，您已经报名成功！</h2>
                            <p class="red_tip">报名后请尽快付款，以便保留所预订的房间。付款后，如果不能参会，请于10月8日之前通知会务组，全额退款。否则需扣除一天所预订的房费。</p>
                            <ul>
                                <li>
                                    <span>订单号：</span>
                                    <span class="bold700">${reg.id}</span>
                                </li>
                                <li>
                                    <span>注册人：</span>
                                    <span>${reg.name}</span>
                                </li>
                                <li>
                                    <span>联系电话：</span>
                                    <span>${reg.tel}</span>
                                </li>
                                <li>
                                    <span>参会人数：</span>
                                    <span class="red_tip">${reg.num}</span>
                                    <span>人</span>
                                </li>
                            </ul>
                        </div>
                        <div class="sign_pay_way common_padding">
                            <h2 class="bold700">选择付款方式</h2>
                            <div class="pay_way_box">
                                <ul class="outerUl">
                                    <li class="common_padding online">
                                        <div class="pay_online">
                                            <span class="pay_selected"></span>在线支付平台
                                        </div>
                                        <ul>
                                            <li class="pay_way_selected">
                                                <img src="/static/img/icon_pay1.png" style="padding: 10px;" alt="">
                                                <span class="checked "></span>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="common_padding offline">
                                        <div class="pay_offline">
                                            <span class="pay_selected"></span>线下支付（银行转账）
                                        </div>
                                        <ul style="display: none">
                                            <div class="con">
                                                <div class="bank">
                                                    <div class="bank_li form_list">
                                                        <div class="form_li">
                                                            <div class="label_l">账户名称</div>
                                                            <div class="con_l">湖南中投华信会议展览服务有限公司</div>
                                                        </div>
                                                        <div class="form_li">
                                                            <div class="label_l">开户银行</div>
                                                            <div class="con_l">中国银行股份有限公司长沙市中南大学支行</div>
                                                        </div>

                                                        <div class="form_li">
                                                            <div class="label_l">银行账号</div>
                                                            <div class="con_l">
                                                                <strong>6067 6511 6859</strong>
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>


                                                <p><strong class="error_meg">主办方在收到您的付款之后，将根据您的信息开具发票，会议期间发放。</strong></p>

                                            </div>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="sign_confirm" data-toggle="modal" data-target="#myModal">
                            <p>
                                <span>￥</span>
                                <span>${reg.price}</span>
                            </p>
                            <a href="javascript:void(0);">确认付款</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>

        function isWeixinCient() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
        }
        /* 刷新查询 */
        function refreshQuery(){
            var state = $.ajax({url:"/front/registration/order/state?regId=${reg.id}&openid=${reg.openId}",async:false}).responseText;
            if(state == 1){
                alert("付款成功！稍后会将确认邮件发送至您的邮箱。并根据您的信息开具发票，于会议期间发放。");
                window.location.href = "http://eef2018.tkgc.net";
            }
        }


        $(function () {
            $('#myModal').on('show.bs.modal', function () {
                if($('.online').hasClass('pay_way_selected')){
                    if(!isWeixinCient()) {
                        $('#myModalContent').html('请使用微信扫码（长按扫描二维码）完成支付<br>主办方在收到您的付款之后，将根据您的信息开具发票，会议期间发放。' + '<br><img src="/front/registration/submit?regId=${reg.id}"/>')
                        setInterval('refreshQuery()', 1000);
                    }else{
                        window.location.href = "/front/registration/submit/app?regId=${reg.id}";
                    }
                }else{
                    $('#myModalContent').html('主办方在收到您的付款之后，将根据您的信息开具发票，会议期间发放。')
                }
                // 执行一些动作...
            })
            //渲染 支付方式
            var pay_way = [{
                'type': 'offline',
                'id': 1,
                'way': '支付宝',
                'img': 'zfb.png'
            },
                {
                    'type': 'online',
                    'id': 2,
                    'way': '微信支付',
                    'img': 'zfb.png'
                },
                {
                    'type': 'offline',
                    'id': 3,
                    'way': '中国农业银行',
                    'img': 'zfb.png'
                },
                {
                    'type': 'offline',
                    'id': 4,
                    'way': '中国银行',
                    'img': 'zfb.png'
                },
                {
                    'type': 'offline',
                    'id': 5,
                    'way': '中国农业银行',
                    'img': 'zfb.png'
                },
                {
                    'type': 'offline',
                    'id': 6,
                    'way': '中国银行',
                    'img': 'zfb.png'
                }

            ]
            var online = pay_way.filter(function (value, index) {
                return value['type'] == 'online'
            })
            var offline = pay_way.filter(function (value, index) {
                return value['type'] == 'offline'
            })
            var onlineHtml = '',offlineHtml = '';
            online.forEach(function(element){
                onlineHtml +=' <li class="">'+
                    '<img src="/static/img/icon_pay1.png" alt="" style="padding: 10px;"></li>'
            });
            // offline.forEach(element => {
            //     offlineHtml +=` <li class="">
            //         <img src="./image/" alt="">
            //     </li>`
            // });
            $(".online ul").html(onlineHtml)
            // $(".offline ul").html(offlineHtml)
            //默认在线支付
            $(".outerUl>li").eq(0).addClass('pay_way_selected')
            $(".outerUl>li>ul>li").eq(0).addClass(['checked','pay_way_selected'])
            $(".outerUl>li").on('click',function(){
                $(this).siblings().removeClass('pay_way_selected').children('ul').hide('fast')
                $(this).addClass('pay_way_selected').show("fast").children('ul').show("fast")
            })
            $(".outerUl>li>ul>li").on('click',function(){
                $(".outerUl>li>ul>li").removeClass(['checked','pay_way_selected'])
                $(this).siblings().removeClass(['checked','pay_way_selected']);
                $(this).addClass(['checked','pay_way_selected'])
            })
        })
    </script>
    @include("/common/front/_footer.html"){}
</div>

<div class="gototop js-top">
    <a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
</div>

<!-- jQuery -->
<script src="/static/front/js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="/static/front/js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="/static/front/js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="/static/front/js/jquery.waypoints.min.js"></script>
<!-- countTo -->
<script src="/static/front/js/jquery.countTo.js"></script>
<!-- Magnific Popup -->
<script src="/static/front/js/jquery.magnific-popup.min.js"></script>
<script src="/static/front/js/magnific-popup-options.js"></script>
<!-- Stellar -->
<script src="/static/front/js/jquery.stellar.min.js"></script>
<!-- Main -->
<script src="/static/front/js/main.js"></script>

</body>
</html>

